<template>
    <view class="container">
        <u-search placeholder="请输入关键字" v-model="searchValue" :height="40" bgColor="#fff" borderColor="#f2f2f2"
            @search="onSearch" @custom="onSearch"></u-search>
        <view class="content" v-if="treeData.length">
            <!-- 左侧目录 -->
            <scroll-view :scroll-y="true" class="leftWrap">
                <view :key="item.id" :class="selectTreeData.id == item.id ? 'activeMl flex' : 'flex'"
                    style="margin-bottom: 60rpx; padding: 14rpx 0;" @click="selectTreeData = item"
                    v-for="item in treeData">
                    <!-- v-for="item in Array.from({ length: 20 }, (item, index) => ({ name: '测试名称' + index })) -->
                    <!-- <view class="line"></view> -->
                    <text class="oneWrap">{{ item.name }}</text>
                </view>
            </scroll-view>
            <!-- 右侧信息 -->
            <scroll-view :scroll-y="true" class="rightWrap">
                <view v-if="contentData.length">
                    <view v-for="item in contentData">
                        <view class="rightItem" @click="onGetFileList(item, !item.children)">
                            <text class="oneWrap flex1"> {{ item.name }}</text>
                            <image src="../static/images/teachingMaterial/leftArrow.svg"
                                style="width: 16rpx;height: 24rpx;" v-if="!item.children" />
                        </view>
                        <view class="threeItem" v-for="itm in item.children" :key="itm.id"
                            @click="onGetFileList(item, !itm.children)">
                            <text class="oneWrap flex1">{{ itm.name }}</text>
                            <image src="../static/images/teachingMaterial/leftArrow.svg"
                                style="width: 16rpx;height: 24rpx;" v-if="!itm.children" />
                        </view>
                    </view>
                </view>
                <view v-else>
                    <view class="noDataStyle">
                        <view class="contentStyle">
                            <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/noDataIcon.png"
                                style="width: 282rpx;height: 224rpx;" />
                            <view style="margin-top: 20rpx;">暂无下级分类</view>
                            <view class="btnStyle" @click="onGetFileList(selectTreeData,true)">
                                查看详情
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <view v-else style="margin-top: 20%">
            <u-empty text="暂无数据" mode="list"></u-empty>
        </view>
    </view>
</template>

<script>
import { docLabelList } from "../services/DataDocumentService";
import { getFlatToTree } from "../utils/PrjUtils";
export default {
    data() {
        return {
            // 树形数据
            treeData: [],
            // 选择的树的数据
            selectTreeData: {},
            // 查询的条件
            searchValue: "",
        }
    },
    onLoad() {
        // 初始化数据
        this.onGetTreeData();

    },
    computed: {
        contentData() {
            return this.treeData.filter(item => item.id == this.selectTreeData.id)[0]?.children ?? []
        },
        threeContent() {

        },

    },
    methods: {
        // 跳转
        onGetFileList(record,status) {
           if(status){
            uni.navigateTo({
                url: `/dataDocument/showFileList?info=${encodeURIComponent(JSON.stringify({labelId:record.id}))}`
            })
           }
        },
        // 获取数据      
        onGetTreeData(name = "") {
            docLabelList(name).then(res => {
                let resData = getFlatToTree(res)
                let newData = resData[0]?.children ?? []
                this.treeData = newData
                this.selectTreeData = newData[0]
            }).catch(err => {

            })
        },
        // 查询
        onSearch() {
            this.onGetTreeData(this.searchValue)
        }
    },
    onShow() {

    },
}
</script>

<style lang="scss" scoped>
* {
    transition: all .5s;
}

.container {
    background-color: #fff;
    padding: 30rpx;
    height: 100vh;
    box-sizing: border-box;
    transition: all .5s;

    .content {
        margin-top: 24rpx;
        display: flex;

        .leftWrap {
            width: 35%;
            padding-left: 12rpx;
            padding-bottom: 20rpx;
            box-sizing: border-box;
            font-size: 28rpx;
            height: calc(100vh - 134rpx);

            .activeMl {
                color: #37B874;
            }

            .line {
                width: 4rpx;
                height: 28rpx;
                background-color: #37B874;
                border-radius: 4rpx;
            }
        }

        .rightWrap {
            width: 60%;
            font-size: 28rpx;
            margin-left: 5%;
            height: calc(100vh - 134rpx);
            padding-bottom: 20rpx;
            box-sizing: border-box;

            .rightItem {
                margin-bottom: 40rpx;
                display: flex;
                color: #37B874;
                align-items: center;
                justify-content: space-between;
                padding: 14rpx 28rpx;
            }

            .threeItem {
                margin-bottom: 20rpx;
                display: flex;
                color: #333333;
                align-items: center;
                justify-content: space-between;
                border-radius: 24rpx;
                background-color: #F9F9F9;
                padding: 14rpx 28rpx;
                padding-left: 80rpx;
            }

            .noDataStyle {
                height: calc(100vh - 300rpx);
                display: flex;
                align-items: center;
                justify-content: center;

                .contentStyle {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;

                    .btnStyle {
                        color: #fff;
                        background-color: #37B874;
                        border-radius: 24rpx;
                        padding: 16rpx 32rpx;
                        margin-top: 60rpx;
                    }
                }

            }
        }
    }
}
</style>